<template>
  <div class="v-editor-input-specification g-jc-sb">
    <el-input
      v-model="inputvalue"
      class="g-one-line"
      :disabled="row.readonly || isModelDisabled"
      @change="handelChange"
    ></el-input>

    <div
      v-if="selected"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { modelService } from "@/modules/model/service";
import { ref, watch, inject, Ref } from "vue";
import { propertyUtil } from "../../PropertyUtil";
import { PropertyRow } from "../../types";
import { BusEvent } from "@/constants/Enums";
import TextEditor from "../modals/TextEditor.vue";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 单行输入框
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();
let inputvalue = ref<string>(props.row.valueSpecificationInfo?.value || ("" as string));

watch(
  () => props.row,
  newVal => {
    inputvalue.value = newVal.valueSpecificationInfo?.value || ("" as string);
  }
);

const handelChange = async () => {
  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = inputvalue.value;
  let res = await modelService.updateModelProperty(dto);
  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
};

async function handleClick() {
  let hasError = false;
  const newText = await TextEditor.popup({
    title: props.row.name,
    text: inputvalue.value
  }).catch((err: any) => {
    err && console.error(err);
    hasError = true;
  });
  if (hasError) return;

  const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  dto.value = newText;
  let res = await modelService.updateModelProperty(dto);
  if (res) {
    app.$bus.emit(BusEvent.REFRESH_PROPERTY, props.row.modelId);
  }
}
</script>
<style lang="scss" scoped>
.v-editor-input-specification {
  height: 100%;
  > .img-btn {
    display: flex;
    align-items: center;
  }
  .el-input .el-input__inner {
    padding-right: 0px;
  }
}
</style>
